<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <!-- 绑定事件的指令 v-on:事件="函数名()" -->
      <!-- 
        鼠标事件：click dblclick contextmenu(右键)
        mouseover mouseout  mouseenter mouseleave
        mousedowm mouseup mousemove mousewheel
        键盘事件：keyup keydown keypress 
        表单事件： change input foucs blur submit reset 
        其他事件： 
          resize onload scroll事件
       -->
       <!-- vue有一套指令系统 帮助快速完成需求 和视图操作 -->
      <div v-on:click="say()">你好</div>
      <!-- v-on:click="函数" 的简写
          @click="函数"  -->
      <div  @click="run(8899)">{{myhobby}}</div>
      <!-- 移动端 事件 仅在移动端支持
      touchstart touchmove touchend. -->
      <div @touchstart="tomove">移动事件</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el:"#app",
        data(){
          return {
            msg:"今天星期五",
            myhobby:"抽烟，喝酒，烫头"
          }
        },
        methods: { //vue的函数和事件函数的放置位置
            say(){
              // vue的数据在js内部使用 
              alert(this.msg)
            },
            run(num){
              alert(num)
              // vue函数之间的互相调用
              this.eat("烧烤")
            },
            eat(food){
              console.log("今天吃"+food);
            },
            tomove(){
              console.log("移动端事件")
            }
        },
      })
    </script>
</body>
</html>